<script setup>
import AsideCard from './asideCard.vue';
import { inject } from 'vue';

const cardData = {
    title: '模式',
    icon: 'Tools'
};

// 直接注入mode对象，不需要updateMode函数
const { mode } = inject('data');
</script>

<template>
    <div class="aside-layout-main dark-theme">
        <AsideCard :title="cardData.title" :icon="cardData.icon">
            <div class="mode-settings">
                <!-- 图标模式开关 - 直接绑定到mode.iconMode.value -->
                <div class="setting-item">
                    <div class="setting-row">
                        <span class="setting-label">图标模式</span>
                        <el-switch
                            v-model="mode.iconMode.value"
                            active-color="#7F56D9"
                        />
                    </div>
                </div>

                <!-- 副标题居中开关 - 直接绑定到mode.subTitleMode.value -->
                <div class="setting-item">
                    <div class="setting-row">
                        <span class="setting-label">副标题居中</span>
                        <el-switch
                            v-model="mode.subTitleMode.value"
                            active-color="#7F56D9"
                        />
                    </div>
                </div>
            </div>
        </AsideCard>
    </div>
</template>

<style scoped>
/* 黑色主题样式 - 匹配间距模块 */
.dark-theme {
    --bg-color: #1a1a1a;
    --card-bg: #242424;
    --text-color: #e0e0e0;
    --border-color: #333;
    --active-color: #7F56D9;
}

.mode-settings {
    padding: 12px 16px;
}

.setting-item {
    margin-bottom: 20px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 400;
}

/* 开关样式调整 */
:deep(.el-switch) {
    --el-switch-on-color: var(--active-color);
    --el-switch-off-color: #666;
}

:deep(.el-switch__core) {
    border-color: var(--border-color);
    background-color: var(--card-bg);
}
</style>